<template>
	<div class="home" style="background-color: #e9eef3;padding: 20px;">
		<!-- 数据 -->
		<el-row>
			<el-col :span="4"><span>订单日期</span></el-col>
			<el-col :span="10">
				<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" ></el-date-picker>
			</el-col>

		</el-row>
		<el-divider></el-divider>
		<el-row>
			<el-col :span="20">
				<v-distpicker @province="changePro" @city="changeCity" @area="changeArea"></v-distpicker>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" round @click="filter()">筛选</el-button>
			</el-col>
		</el-row>
		<el-divider></el-divider>
		<el-table stripe="" border="" :data="tabledata" style="width: 100%">
			<el-table-column prop="order" label="成交用户数量" width=""> </el-table-column>
			<el-table-column prop="res" label="用户注册统计" width=""> </el-table-column>
			<el-table-column prop="userNum" label="销售统计" width=""> </el-table-column>
		</el-table>



	</div>
</template>

<script>
	import axios from 'axios'
	import VDistpicker from 'v-distpicker'
	export default {

		name: 'home',
		data() {
			return {
				date: [],
				tabledata: [],
				dis: {},
				url:'http://47.108.201.43:3000'
			}
		},
		//生成时触发
		created() {
			//加载初始数据
			this.getInitData();
			
		},
		methods: {
			filter() {
				var that = this				
				
				axios.post(that.url+'/api/queryCustomerData',{datas:that.dis}
				).then(function(res){
					if (res.status==200) {
						if (res.data.code==200) {
							console.log(res)
							that.$message.success({
								message:"筛选成功！",
								showClose:true
							})
							that.tabledata=[{"res":res.data.data.res,"order":res.data.data.order,"userNum":res.data.data.userNum}]
							
						} else{
							that.$message.error({
								message:"错误代码"+res.data.code,
								showClose:true
							})
							that.tabledata=[]
						}
						
					} else{
						that.$message.error({
							message:"连接数据库失败！",
							showClose:true
						})
					}
				})
			},
			changeArea(area){
				var that=this
				that.dis.area=area.value
			},
			changeCity(city){
				var that=this
				that.dis.city=city.value
			},
			changePro(pro){
				var that = this
				that.dis.province=pro.value
			},			
			//获取初始数据
			getInitData() {
				var that = this;
					
				//登陆成功之后
				axios.get(that.url+'/api/getCustomerData').then(function(res) {
					if (res.data.code == 200) {
						console.log(res)
						that.$message.success({
							message: "加载成功",
							showClose: true
						});
						var data = res.data.data
						that.tabledata = [{
							"order": data.res2,
							"userNum": data.res,
							"res": data.korder
						}]
					} else {
						console.log(res)
						that.$message.error({
							message: res.data,
							showClose: true
						});
					}

				})

			},


		},

		components: {
			VDistpicker
		}
	}
</script>
